Estoy usando Next.js con mecanografiado.
Tengo un formulario con múltiples entradas. No quería hacer un estado de uso para cada entrada por razones obvias y tampoco quería usar una biblioteca lista para formularios. Solo quería encontrar la solución a esto.
¿Cómo puedo obtener la función handleInputChange para cambiar el valor del nombre del director, por ejemplo, en el "estado inicial"?
const formInitialValues = { teamName: "", bornAt: "", logo: "", director: { name: "", email: "", phone: "", }, }; const [formData, setFormData] = useState(formInitialValues); const handleInputChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value, }); }; ... <input type="text" placeholder="Director name" name="directorName" id="directorName" required value={formData.director.name} onChange={handleInputChange} /> ...Puedes hacerlo como a continuación:
const handleInputChange = (e) => { const { name, value } = e.target; setFormData(() => { ...formData, director: { ...formData.director, [name]: value } }); };o usando la devolución de llamada del método setter:
setFormData((prevFormData) => ({ ...prevFormData, director: { ...prevFormData.director, [name]: value } }));